<template>
  <view class="content">
    <view class="content-title">
      <text class="main-title">{{ title }}</text>
      <text v-if="notes" class="tips-title">{{ notes }}</text>
    </view>
    <eui-row class="demo-eui-row">
      <eui-col v-for="(item, index) in range" :key="index" :span="8" :lineHeight="68">
        <!--多选-->
        <view v-if="isMulti" class="demo-eui-col">
          <view v-if="item.checked" class="choose-view m-button" :class="[theme]" @click="onMulti(item)">
            <text class="text-hide">{{ item.text }}</text>
          </view>
          <view v-else class="choose-view m-button-default" @click="onMulti(item)">
            <text class="text-hide">{{ item.text }}</text>
          </view>
        </view>
        <!--单选-->
        <view v-else class="demo-eui-col">
          <view v-if="modelValue === item.value" class="choose-view m-button" :class="[theme]" @click="onRadio(item)">
            <text class="text-hide">{{ item.text }}</text>
          </view>
          <view v-else class="choose-view m-button-default" @click="onRadio(item)">
            <text class="text-hide">{{ item.text }}</text>
          </view>
        </view>
      </eui-col>
    </eui-row>
  </view>
</template>

<script setup type="ts">
import { storeToRefs } from 'pinia';
import { ref, defineProps, watch, defineEmits, onMounted } from 'vue';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);

const props = defineProps({
  /**
   * 值
   * */
  modelValue: {
    type: String,
    default: ''
  },
  /**
   * 选项
   * */
  range: {
    type: Array,
    default: []
  },
  /**
   * 是否多选
   * */
  isMulti: {
    type: Boolean,
    default: true
  },
  /**
   * 标题
   * */
  title: {
    type: String,
    default: ''
  },
  /**
   * 备注
   * */
  notes: {
    type: String,
    default: ''
  },
});

const emit = defineEmits(['buttonClick', 'update:modelValue']);

// 单选
const onRadio = (e) => {
  if (e.value === props.modelValue) {
    emit('buttonClick', '');
    emit('update:modelValue', '');
  } else {
    let items = props.range;
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.value === e.value) {
        emit('buttonClick', item.value);
        emit('update:modelValue', item.value);
        break;
      }
    }
  }
}

// 多选
const onMulti = (e) => {
  let items = props.range;
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    if (item.value === e.value) {
      item.checked = !item.checked;
      break;
    }
  }
  let newValueList = items.filter(item => item.checked === true)
      .map(item => item.value)
      .join(',');
  emit('buttonClick', newValueList);
  emit('update:modelValue', newValueList);
}

</script>

<style lang="scss" scoped>
@import '@/main.scss';

.content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20rpx 4rpx 20rpx;
}

.content-title {
  margin: 28rpx 8rpx 12rpx 8rpx;
  font-style: normal;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level2;
  .main-title {
    color: $uni-text-color-primary;
    font-size: $uni-font-size-level3;
    line-height: 40rpx;
  }
  .tips-title {
    color: $uni-text-color-hint;
    font-size: $uni-font-size-level7;
    margin-left: 10rpx;
  }
}

.demo-eui-col {
  height: 68rpx;
  padding: 8rpx;
  box-sizing: border-box;
  display: flex;
}

.choose-view {
  width: 100%;
  height: 100%;
  border-radius: 39rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-family: $uni-font-family;
  font-size: $uni-font-size-level4;
  line-height: 37rpx;
  box-sizing: border-box;
}

.m-button {
  font-weight: $uni-font-weight-level2;
  color: var(--theme-color);
  background: var(--theme-bgc-light);
  border: 1rpx solid var(--theme-color);
}

.m-button-default {
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-primary;
  background: $uni-bg-color-input;
}
.text-hide {
  width: 90%;
  text-align: center;
  white-space: nowrap;  /* 防止文本换行 */
  overflow: hidden;     /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

</style>
